<template>
  <v-container>
    <v-list class="d-flex align-start">
      <v-list-item-avatar tile width="350" height="130" class="rounded">
        <img :src="video.cover">
      </v-list-item-avatar>
      <v-container class="pa-0">
        <v-tooltip top close-delay="100" open-delay="100">
          <template v-slot:activator="{ on, attrs }">
            <span
                v-bind="attrs"
                v-on="on"
            >
              <v-list-item-title class="title">
                {{ video.title }}
              </v-list-item-title>
            </span>
          </template>
          <span>{{ video.title }}</span>
        </v-tooltip>

        <v-list-item class="pa-0">
          <v-chip label small class="success font-italic">NEW</v-chip>
          <v-chip label small class="warning font-italic mx-2">HOT</v-chip>
          <span class="grey--text">更新于：{{ video.time }}</span>
        </v-list-item>
        <v-tooltip top max-width="500" close-delay="100" open-delay="100">
          <template v-slot:activator="{ on, attrs }">
            <span
                v-bind="attrs"
                v-on="on"
            >
              <v-list-item class="pa-0 grey--text line-3" v-html="video.introduce" />
            </span>
          </template>
          <span v-html="video.introduce"></span>
        </v-tooltip>
      </v-container>
      <v-list-item-action>
        <div class="text-center">
          <span class="grey--text">{{ video.read | readCount }}人已学习</span>
          <v-btn class="rounded-pill info mt-1" small>开始学习</v-btn>
        </div>
      </v-list-item-action>
    </v-list>
  </v-container>
</template>

<script>
export default {
  name: "VideoCard",
  props: ['video']
}
</script>

<style lang="less" scoped>
  .line-3 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .title{
    width:400px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
</style>
